<template>
	<view class="my-team" :key="refreshKey">
		<view class="team-title" style="animation-duration: 2s;">
			<view class="use-content">
				<view class="use-icon">

				</view>
				<view class="use-name">
					{{ realName.split('')[0] }}的团队
				</view>
				<view class="use-dj">
					等级{{memberLevelNum}}
				</view>
			</view>
			<view class="app-url" @click="copyData(appDownloadUrl)">
				<view class="url-title">
					复制邀请链接
				</view>
				<view class="url-icon">
				</view>
			</view>
		</view>
		<view class="team-total" style="animation-duration: 2s;">
			<view class="total-content">
				<view class="total-item">
					<view class="">
						团队总人数
					</view>
					<view class="total-number">
						{{teamTotalPerformance.teamSize}}
					</view>
				</view>
				<view class="total-item">
					<view class="">
						团队总充值
					</view>
					<view class="total-number">
						{{teamTotalPerformance.teamRechargeAmount}}
					</view>
				</view>
				<view class="total-item">
					<view class="">
						团队总提现
					</view>
					<view class="total-number">
						{{teamTotalPerformance.teamWithdrawAmount}}
					</view>
				</view>
			</view>
		</view>
		<view class="team-level" style="animation-duration: 2s;">
			<view class="level-one">
				<view class="level-two">
					<view class="">
						3级内总人数(人)
					</view>
					<view class="level-number">
						{{teamLevel3RangePerformance.teamSize}}
					</view>
				</view>
				<view class="level-two">
					<view class="">
						3级内累计投资(USDT)
					</view>
					<view class="level-number">
						{{teamLevel3RangePerformance.teamFinancialBuyInAmount}}
					</view>
				</view>
			</view>
			<view class="level-one">
				<view class="level-two">
					<view class="">
						3级累计充值(USDT)
					</view>
					<view class="level-number">
						{{teamLevel3RangePerformance.teamRechargeAmount}}
					</view>
				</view>
				<view class="level-two">
					<view class="">
						3级内累计提现(USDT)
					</view>
					<view class="level-number">
						{{teamLevel3RangePerformance.teamWithdrawAmount}}
					</view>
				</view>
			</view>
		</view>
		<view class="list-title">
			<view class="title-name">
				下级账号列表
			</view>
		</view>
		<view class="custom-table" style="animation-duration: 2s;">
			<view class="custom-table-tr-th">
				<view class="custom-table-th table-name">
					ID/
					姓名
				</view>
				<view class="custom-table-th table-leve">
					所在体系
				</view>
				<view class="custom-table-th table-number">
					<view>充值/提现</view>
				</view>
			</view>
			<view class="custom-table-tr" v-for="account in accounts">
				<view class="custom-table-td custom-table-td-link table-name" @click="gotoLowerLevel(account)">
					{{maskedAccountId(account.id)}} / {{ account.realName != null? account.realName :'未实名' }}
				</view>
				<view class="custom-table-td table-leve">
					{{formatUpperCaseNumber(account.relativeLevel)}}级
				</view>
				<view class="custom-table-td custom-table-td-highlight table-number">
					<view class="number-item item1">充值:<view class="number">
							{{account.rechargeAmount}}
						</view>
					</view>
					<view class="number-item">提现: <view class="number">
							{{account.withdrawAmount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-show="noDataFlag">
			<uv-empty text="没有下级了" mode="data"></uv-empty>
		</view>
		<!-- 		<view class="team-data">
			<view class="team-th">
				
			</view>
			<view class="team-border">
				
			</view>
		</view> -->
		<!-- <view class="statistic">
			<view class="statistic-title">
				3级内总计人数(人)：{{teamLevel3RangePerformance.teamSize}}
			</view>
			<view class="statistic-items">
				<view class="statistic-item">
					<view class="statistic-item-label">3级内累计充值(USDT)</view>
					<view class="statistic-item-value">{{teamLevel3RangePerformance.teamRechargeAmount}}</view>
				</view>
				<view class="statistic-item">
					<view class="statistic-item-label">3级内累计提现(USDT)</view>
					<view class="statistic-item-value">{{teamLevel3RangePerformance.teamWithdrawAmount}}</view>
				</view>
				<view class="statistic-item">
					<view class="statistic-item-label">3级内总计人数(人)</view>
					<view class="statistic-item-value">{{teamLevel3RangePerformance.teamSize}}</view>
				</view>
				<view class="statistic-item">
					<view class="statistic-item-label">3级内累计投资金额(USDT)</view>
					<view class="statistic-item-value">{{teamLevel3RangePerformance.teamFinancialBuyInAmount}}</view>
				</view>
			</view>
		</view>
		<view class="statistic">
			<view class="statistic-title">
				团队总人数(人)：{{teamTotalPerformance.teamSize}}
			</view>
			<view class="statistic-items">
				<view class="statistic-item">
					<view class="statistic-item-label">团队总充值(USDT)</view>
					<view class="statistic-item-value">{{teamTotalPerformance.teamRechargeAmount}}</view>
				</view>
				<view class="statistic-item">
					<view class="statistic-item-label">团队总提现(USDT)</view>
					<view class="statistic-item-value">{{teamTotalPerformance.teamWithdrawAmount}}</view>
				</view>
			</view>
		</view>
		<view class="team-member">
			<view class="team-member-title">
				<view class="team-member-title-l">下级账号列表</view>
				<view class="team-member-title-r">
					<uv-text type="primary" text="返回上一级" size="11" v-show="appointAccounts.length > 0"
						@click="backHigherLevel"></uv-text>
				</view>
			</view>

		</view> -->
	</view>
</template>

<script>
	import common from '@/common/common'
	export default {
		data() {
			return {
				appDownloadUrl: '',
				realName: '',
				memberLevelNum: '',
				teamLevel3RangePerformance: '',
				teamTotalPerformance: '',
				accounts: [],
				appointAccounts: [],
				noDataFlag: false,
				refreshKey:0
			}
		},
		onLoad() {
			this.getTeamLevel3RangePerformance();
			this.getTeamTotalPerformance();
			this.findTeamAppointAccountLowerLevel();
			this.getAppDownloadUrl();
			this.getMemberInfo();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {
			maskedAccountId(id) {
			const length = id.length;
				if (length > 6) {
					return id.slice(0, 2) + '**' + id.slice(-2);
				}
				return id;
			},
			formatUpperCaseNumber(index) {
				index = Number(index)
				let upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿']
				var length = String(index).length
				if (length == 1) {
					return upperCaseNumber[index]
				} else if (length == 2) {
					if (index == 10) {
						return upperCaseNumber[index]
					} else if (index > 10 && index < 20) {
						return '十' + upperCaseNumber[String(index).charAt(1)]
					} else {
						return upperCaseNumber[String(index).charAt(0)] + '十' + upperCaseNumber[String(index).charAt(1)]
							.replace('零', '')
					}
				}
				return index
			},
			getMemberInfo() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					var accountInfo = res.data;
					that.realName = accountInfo.realName;
					that.memberLevelNum = accountInfo.memberLevelNum;
				});
			},
			copyData(data) {
				common.copyData(data);
			},
			getAppDownloadUrl() {
				var that = this;
				uni.$uv.http.get('/setting/getAppDownloadUrl').then(res => {
					that.appDownloadUrl = res.data;
				});
			},
			backHigherLevel() {
				this.appointAccounts.pop();
				this.findTeamAppointAccountLowerLevel();
			},

			gotoLowerLevel(record) {
				this.appointAccounts.push(record);
				this.findTeamAppointAccountLowerLevel();
			},

			findTeamAppointAccountLowerLevel() {
				var that = this;
				uni.$uv.http.get('/team/findTeamAppointAccountLowerLevel', {
					params: {
						appointAccountId: this.appointAccounts.length > 0 ? this.appointAccounts[this
							.appointAccounts.length - 1].id : '',
					}
				}).then(res => {
					that.accounts = res.data;
					that.noDataFlag = that.accounts.length == 0;
				});
			},

			getTeamTotalPerformance() {
				var that = this;
				uni.$uv.http.get('/team/getTeamTotalPerformance').then(res => {
					that.teamTotalPerformance = res.data;
				});
			},

			getTeamLevel3RangePerformance() {
				var that = this;
				uni.$uv.http.get('/team/getTeamLevel3RangePerformance').then(res => {
					that.teamLevel3RangePerformance = res.data;
				});
			},
		}
	}
</script>

<style lang="less" scoped>
.icon-image {
	width: 35rpx;
	height: 35rpx;
	margin-right: 8rpx;
	display: inline-block;
	vertical-align: middle;
}
body {
	height: auto !important;
	background: url('/static/img/my_bg3.png') no-repeat;
	background-size: 100% 50%;
	background-color: #f3f5ff;
}
	.my-team {
		padding: 0 32rpx;
	}

	.team-title {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		margin-bottom: 32rpx;

		.use-content {
			display: flex;
			align-items: center;

			.use-icon {
				width: 100rpx;
				height: 100rpx;
				background-image: url('../../static/img/mj/user-img.png');
				background-size: 100% 100%;
				background-position: center;
				margin-right: 20rpx;
			}

			.use-name {
				font-weight: bold;
				font-size: 32rpx;
				color: #262A2D;
				line-height: 32rpx;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-right: 20rpx;
			}

			.use-dj {
				width: 152rpx;
				height: 44rpx;
				background-image: url('../../static/img/mj/level.png');
				background-size: 100% 100%;
				background-position: center;
				font-family: SF Pro Text, SF Pro Text;
				font-weight: bold;
				font-size: 26rpx;
				color: #5E512D;
				line-height: 24rpx;
				letter-spacing: 1px;
				text-align: right;
				font-style: normal;
				text-transform: none;
				padding-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
			}
		}

		.app-url {
			width: 188rpx;
			height: 56rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 30rpx 2rpx 0rpx 30rpx;
			font-family: SF Pro Text, SF Pro Text;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.4);
			line-height: 24rpx;
			text-align: right;
			font-style: normal;
			text-transform: none;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 20rpx;
			margin-right: -32rpx;
			// box-sizing: border-box;

			.url-icon {
				width: 24rpx;
				height: 24rpx;
				background-image: url('../../static/img/mj/zk.png');
				background-size: 100% 100%;
				background-position: center;
			}
		}
	}

	.team-total {
		height: 180rpx;
		background: #fed380;
		padding: 40rpx 60rpx 50rpx 40rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		font-family: SF Pro Text, SF Pro Text;
		font-weight: 400;
		font-size: 24rpx;
		color: #C5C3BA;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		box-sizing: border-box;
		margin-top: 100rpx;

		.total-content {
			display: flex;
			justify-content: space-between;
			height: 100%;

			.total-item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
                color: #000;
				font-size: 26rpx;
				.total-number {
					font-weight: bold;
					font-size: 40rpx;
					color: #000;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.team-level {
		height: 332rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(11, 19, 39, 0.1);
		border-radius: 0rpx 0rpx 28rpx 28rpx;
		padding: 50rpx 60rpx 50rpx 32rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #C5C3BA;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-bottom: 40rpx;

		.level-one {
			display: flex;
			justify-content: space-between;
			height: 50%;
            color: #886752;
			.level-two {
				.level-number {
					font-weight: bold;
					font-size: 40rpx;
					color: #886752;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 24rpx;
				}
			}
		}
	}

	.list-title {
		display: flex;
		margin-bottom: 20rpx;

		.list-icon {
			width: 6rpx;
			height: 28rpx;
			background: #E4D494;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-right: 8rpx;
		}

		.title-name {
			font-size: 32rpx;
			color: #262A2D;
			line-height: 50rpx;
			letter-spacing: 1px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}

	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
	}

	.team-member {
		padding-left: 16rpx;
		padding-right: 16rpx;
	}

	.team-member-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 32rpx;
	}

	.team-member-title-l {}

	.custom-table {
		// padding: 0 20rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		
		.table-leve {
			width: 17%;
			margin: 0 10rpx;
			text-align: center;
		}

		.table-number {
			width: 168rpx;

			.item1 {
				margin-bottom: 16rpx;
			}

			.number-item {
				display: flex;
				font-weight: 400;
				font-size: 25rpx;
				color: #262A2D;
				line-height: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				.number {
					color: #E4D494;
					margin-left: 8rpx;
				}
			}
		}

		.table-name {
			flex: 1;
			text-align: left;
		}

	}

	.custom-table-tr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
		padding: 0 20rpx;
		background-color: #FFF;
		height: 140rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		
	}
	.custom-table-tr-th {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-position: center;
		padding: 0 20rpx;
	}

	.custom-table-th {
		height: 64rpx;
		text-align: center;
		padding: 8rpx 4rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		// flex: 1;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #24282D;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		text-align: center;
		
		// border-right: 2rpx solid rgb(228, 231, 237);
	}

	.custom-table-td {
		text-align: center;
		padding: 8rpx 4rpx;
		display: flex;
		flex-direction: row;
		flex-direction: column;
		// flex: 1;
		justify-content: center;
		color: #606266;
		border-bottom: 1rpx solid rgba(255,255,255,0.1);
		font-weight: 400;
		font-size: 28rpx;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		// border-right: 2rpx solid rgb(228, 231, 237);
	}

	.custom-table-td-link {
		// color: royalblue;
	}

	.custom-table-td-highlight {
		color: #d0021b;
		font-weight: bold;
	}

	.statistic-item-label {
		color: #fff;
		letter-spacing: 2rpx;
		font-size: 26rpx;
		padding-bottom: 32rpx;
	}

	.statistic-item-value {
		color: #fff;
		font-size: 26rpx;
	}

	.statistic-item {
		width: 43%;
		background: hsla(0, 0%, 100%, .2);
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		margin-bottom: 32rpx;
	}
	.statistic-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.statistic {
		margin: 32rpx 16rpx;
		background: linear-gradient(180.44deg, #0068b7, #b9d4e9);
		border-radius: 16rpx;
		padding: 16rpx 16rpx;
	}
	

	.statistic-title {
		color: #fff;
		letter-spacing: 2rpx;
		font-size: 34rpx;
		margin-bottom: 32rpx;
	}
</style>